<template>
	<view class="detail-main">
		<view class="banner">
			<swiper class="banner-swiper swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="400">
				<swiper-item class="swiper-item" v-for="img in bannerList" :key="img">
					<image class="image" :src="img" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- https://ext.dcloud.net.cn/plugin?id=2183  自定义icon图标 -->
			<view class="collect" @tap="collect">
				<icons type="favor" size="56rpx" :color="iconColor" ></icons>
				<!-- <image class="image" src="../../../static/icons/collect.png" mode="scaleToFill"></image> -->
			</view>
			<view class="dotts">
				<span class="dott" :style="{backgroundColor: d.color}" v-for="d in skuList" :key="d.id"></span>
			</view>
		</view>
		<view class="title-block">
			<div class="boxs">
				<div class="price " v-if="product.promotionPrice">¥ <view class="money">{{product.promotionPrice }}</view>.00</vie></div>
				<div class="price" :class="{disabled : product.promotionPrice}">¥ <view class="money">{{product.price }}</view>.00</vie></div>
				<div class="promotion-type">
					没有促销使用原价
				</div>
				
			</div>
			
			<div class="detail_title">{{product.name}} </div>
			<div class="detail_desc">{{product.description}}</div>
			
			
		</view>
		<view class="content">
			<jyf-parser :html="product.detailMobileHtml" :tag-style="tagStyle" ref="article"></jyf-parser>
			<!-- <rich-text class="rich-area" :nodes="product.detailMobileHtml"></rich-text> -->
		</view>
		<view class="goods-nav">
			<view class="kf"></view>
			<view class="buy-btns">
				<view class="btn-goods-cart" @tap="addCart">添加到购物车</view>
				<view class="btn-goods-buy" @tap="addBuy">立即购买</view>
			</view>
		</view>
		<!-- ref 给组建起一个名字 使得在vue中可以通过this.$refs.xx获取到当前组件对象 -->
		<Sku :skuList="skuList" @select-sku="handleSelSku" ref="skuCard"></Sku>
	</view>
</template>

<script>
	import productApi from '@/api/kind/product.js'
	import Sku from '../sku/index.vue'
	import {checkLogin} from '@/utils/common.js'
	import NP from 'number-precision'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import Icons from "@/components/lz-icons/icons.vue"
	import mix from "@/mixins/index.js"
	export default {
		components: {
			Sku,
			Icons,
			jyfParser
		},
		mixins:[mix],
		data() {
			return {
				productId: '',
				product: {
					imgs: []
				},
				tagStyle:{
					img: 'width:100%;height:auto;'
				},
				bannerList:[],
				skuList: [],
				buyType: 0, // 0 添加购物车, 1 购买
				iconColor:"#fff"  // #fff red  

			}
		},
		onLoad(option) {
			this.productId = option.productId;
			this.getDetail();
			
		},
		onShow(){
			// 重置收藏按钮的状态
			var collectList = uni.getStorageSync("collectList");
			if(collectList){
				const item = collectList.find(ele =>ele.id == this.productId);
				if(item){
					this.iconColor = "red"
				}else{
					this.iconColor = "#fff"
				}
			}else{
				this.iconColor = "#fff"
			}
			
		},
		computed:{
			// skuListCom(){
			// 	for(var i = 0 ; i < this.skuList.length ; i ++){
			// 		if(this.product.imgs.length>i){
			// 			this.skuList[i].img = this.product.imgs[i];
			// 		}else{
			// 			break; 
			// 		}
			// 	}
			// 	return this.skuList;
			// }
		},
		methods: {
			getDetail() {
				productApi.detail(this.productId).then(res => {
					
					res.data.product.skuList.forEach(ele =>{
						this.bannerList.push(ele.pic)
					})
					this.product = res.data.product;
					// this.bannerList.push(res.data.product.albumPics)
					// // <img src="xx.jpg"/>  ==>  <img style="max-width:100%;height:auto;"" src="xx.jpg"/> 
					// // this.product.content = this.product.content.replace(/<img/ig,'<img style="max-width:100%;height:auto;"');
					// if (res.data.product.attr_img) {
					// 	this.product.imgs = res.data.product.attr_img.split(',');
					// }
					if (this.product) {
						res.data.product.skuList.forEach(ele =>{
							ele.spData = JSON.parse(ele.spData)
						})
						this.skuList = res.data.product.skuList;
					}
					

				})
			},
			// rs 是从 sku.vue 中选中的某个sku组成的对象,并$emit返回给当前页面的对象
			handleSelSku(rs) {
				var skuObj = {
							skuCode: rs.sku_code,
							gname: this.product.gname,
							coverImg: this.product.cover_img,
							color_text: rs.color_text,
							skuId: rs.id,
							price: rs.price,
							count: rs.count
						};
				// 0 添加购物车   ;  1 直接购买
				if(this.buyType == '0'){
					// var buycart = uni.getStorageSync('leju-buycart');
					// if(!buycart){
					// 	buycart = [];
					// 	uni.setStorageSync('leju-buycart',buycart);
					// }
					// // 时间戳为临时id
					// // skuObj.tempId = new Date().getTime();
					// // 添加 应该是判断 是否有相同的skuId 有的话 让count++即可
					// var isExist = false; // 假设不存在当前新增的商品
					// for(var i = 0 ; i < buycart.length ; i ++){
					// 	if(buycart[i].skuId == skuObj.skuId){
					// 		// 说明已经存在
					// 		isExist = true;
					// 		// 修改当前的元素的count
					// 		buycart[i].count += skuObj.count;
					// 		break;
					// 	}
					// }
					// // 不存在 直接push
					// if(!isExist){
					// 	buycart.push(skuObj);
					// }
					// // 重置购物车
					// uni.setStorageSync('leju-buycart',buycart);
					// // 因为存在api  所以这里应该发送api 更新服务器的购物车信息
					// // ... 
					
					// uni.showToast({
					// 	title: '添加购物车成功!',
					// 	duration: 800
					// })
					
					const obj = {
						productId:this.productId,
						productSkuId:rs.skuId,
						quantity:rs.count
					};
					
					productApi.addCart(obj)
					.then(res =>{
						if(res.success == true){
							uni.showToast({
								title:"添加购物车成功",
								icon:"success"
							});
							this.$refs.skuCard.closeCard();
						}
					})
					return;
				}
				
				var objs = {
					"orderItemList": [
					    {
					      "productId": this.productId,
					      "productQuantity": rs.count,
					      "productSkuId": rs.skuId
					    }
					  ]
				}
				productApi.addPreOrder(objs)
				.then(res =>{
					if(res.success == true){
						uni.showToast({
							title:"购买成功,1s后跳转到订单确认页",
							icon:"none"
						});
						this.$refs.skuCard.closeCard();
						setTimeout(()=>{
							uni.navigateTo({
								url:`../../mine/order/detail/index?id=${res.data.orderId}`
							})
						},1000)
					}
				})
				// // 1. 用户选择的sku拼装为订单并且提交
				// // 说明: 09班 之前的订单逻辑做了增强. 之前的逻辑是用户未支付订单在本地ls保存,现在改成了用户添加订单,如果未支付
				// // 则状态为0,也是提交到服务器
				// // 2. 把当前用户的sku订单 传递到订单确认页面
				// rs.gname = this.product.gname;
				// //构建订单对象
				// var orderObj = {
				// 	userId: this.$store.getters.userId,
				// 	count: rs.count, // 因为商品详情页 只有一个sku 所以sku的count就是总count
				// 	freight: 0, // 运费 , 见api
				// 	price: rs.count * rs.price,  // 总价格
				// 	orderDetailList: [
				// 		skuObj
				// 	]
				// }
				// //存入vuex
				// this.$store.commit('order/ADD_ORDER_TEMP',orderObj)
				
				// // 跳转到订单确认页面
				// uni.navigateTo({
				// 	url:'../../mine/order/detail/index'
				// })

			},
			addCart(){
				// 封装的验证登陆的方法 如果登陆成功,执行回调
				this.checkLogins(()=>{
					this.buyType = 0;
					this.$refs.skuCard.openCard();
				})
				
			},
			addBuy(){
				// 1. 判断了是否登陆,如果未登录 直接提示登陆
				// 2. 如果登陆了,则直接在回调里执行下一步
				this.checkLogins(()=>{
					this.buyType = 1;
					this.$refs.skuCard.openCard();
				})
				
				
				
			},
			collect1(){
				var collectList = uni.getStorageSync("collectList");
				if(collectList){ // 如果本地存在  // 
					const item = collectList.find(ele =>ele.id == this.product.id);
					if(item){ // 如果存在相同商品  数量加减
						item.nums ++ ;
						
					}else{ // 不存在  新增
						this.product.nums = 1;
						collectList.push(this.product)
					}
					uni.setStorageSync("collectList",collectList)
				}else{ // 如果本地不存在收藏列表  添加新属性 num 表示添加的数量
					this.product.nums = 1;
					uni.setStorageSync("collectList",[this.product])
				}
			},
			cancelCollection(){
				var collectList = uni.getStorageSync("collectList");
				
				const index = collectList.findIndex(ele =>ele.id == this.product.id);
				collectList.splice(index,1);
				uni.setStorageSync("collectList",collectList)
			},
			collect(){
				if(this.iconColor == "#fff"){ // 收藏操作
					this.collect1();
					this.iconColor = "red"
				}else{ // 取消收藏操作
					this.cancelCollection();
					this.iconColor = "#fff"
				}
				
				
				
				// uni.showToast({
				// 	title:'已收藏!',
				// 	duration: 800
				// })
			},

		}
	}
</script>

<style scoped lang="scss">
	.detail-main {
		.banner {
			width: 100%;
			position: relative;

			.banner-swiper {
				width: 100%;
				height: 634rpx;

				.swiper-item {
					width: 750rpx;
					height: 100%;

					.image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.collect {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				top: 634rpx;
				right: 100rpx;
				margin-top: -50rpx;
				background: #354E44;
				box-shadow: 0 16px 24px 0 rgba(70, 70, 70, 0.20);
				text-align: center;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				.image {
					width: 44rpx;
					height: 44rpx;
					margin-top: 29rpx;
				}
			}

			.dotts {
				width: 100%;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dott {
					width: 50rpx;
					height: 50rpx;
					margin: 0 20rpx;
					border-radius: 50%;
				}
			}
		}

		.title-block {
			box-sizing: border-box;
			padding:0 68rpx;
			
			.detail_title {
				    color: #262626;
				    overflow: hidden;
				    font-size: 32rpx;
					font-weight: 700;
			}

			.detail_desc {
				font-size: 24rpx;
				padding: 18px 0 0;
				line-height: 1.3;
				color: #666;
			}
			.boxs{
				display: flex;
				align-items: baseline;
			}
			.price {
				    font-family: JDZH-Regular;
				    font-size: 32rpx;
				    line-height: 60rpx;
				    color: #f2270c;
				    display: flex;
					font-family: fantasy;
					align-items: baseline;
					.money{
						    font-size: 60rpx;
					}
			}
			.promotion-type{
				position: relative;
				display: -webkit-inline-box;
				display: -webkit-inline-flex;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				line-height: normal;
				margin-right: 6px;
				padding: 0 6px;
				border: 1px solid #ff8373;
				border-radius: 2.5px;
				height: 15px;
				color: #f2270c;
				font-size: 10px;
				color: #fff;
				background-color: #f2270c;
				border-color: #f2270c;
				margin-left: 10rpx;
			}
			.promotion-type:before{
				box-sizing: border-box;
				content: "";
				position: absolute;
				left: -1px;
				top: 50%;
				transform: translate(0,-50%);
				width: 3px;
				height: 6px;
				background-color: #fff;
				border: 1px solid #ff8373;
				border-radius: 0 3px 3px 0;
				border-left: none;
			}
			.promotion-type:after{
				box-sizing: border-box;
				content: "";
				position: absolute;
				right: -1px;
				top: 50%;
				transform: translate(0,-50%);
				width: 3px;
				height: 6px;
				background-color: #fff;
				border: 1px solid #ff8373;
				border-radius: 3px 0 0 3px;
				border-right: none;
			}
			.disabled{
				    margin: 0 0 0 4rpx;
				    text-decoration: line-through;
				    color: #b5b5b5;
				    font-size: 24rpx;
					font-weight: normal;
					.money{
						    font-size: 24rpx;
							font-weight: normal;
					}
			}
		}

		.content {
			box-sizing: border-box;
			padding: 68rpx;
			overflow: hidden;
			margin-bottom: 60px;

			::v-deep img {
				width: 100%;
			}
			// .rich-area{
			// 	.rich-img{
			// 		width: 100%;
			// 		height: auto;
			// 	}
			// }
		}

		.goods-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 888;
			display: flex;
			box-sizing: border-box;
			padding: 0 60rpx;
			justify-content: space-between;
			background-color: #fff;
			align-items: center;
			height: 120rpx;
			.kf {
				width: 60rpx;
				height: 60rpx;
				background: url('../../../static/icons/kf.png') no-repeat 0 center;
				background-size: 40rpx 40rpx;
				
			}
			.buy-btns{
				display: flex;
				justify-content: center;
				height: 100%;
				.btn-goods-cart,
				.btn-goods-buy{
					width: 238rpx;
					height: 80rpx;
					margin-top: 20rpx;
					// border-radius: 14rpx;
					font-size: 30rpx;
					color: #fff;
					line-height: 80rpx;
					text-align: center;
					// font-weight: 600;
					background-color: #354E44;
					&.btn-goods-cart{
						background-color: #E2E2E2;
						color: #8F8F94;
					}
				}
			}
		}
	}
</style>
